
<template>
    <div class="cover-box">
        <div class="item-show" v-bind:style="cssStyle()">
            <div class="hd">
                {{config.title}}
                <div class="btns">
                    <i class="fa fa-times pull-right fa-2x close" title="关闭" v-on:click="close()"></i>
                </div>
            </div>
            <div class="bd">
                <div class="items_left">
                    <div class="search_box">
                        <p>
                            选择分类: <select v-model="params.catsId">
                                <option v-for="cat in cats" v-bind:value="cat.value">{{cat.name}}</option>
                            </select>
                        </p>
                        <p>
                            商品名称: <input type="text" placeholder="按商品名进行搜索" class="input-one" v-model="params.keyWord">
                            <button @click="search()">搜索</button>
                        </p>
                    </div>
                    <div class="all_items">
                        <div class="item" v-for="item in items.list">
                            <img :src="item.item_imgs.split(';')[0]+'_60x60.jpg'"/>
                            <div class="detail">
                                <p class="title"><a target="_blank" :href="['//detail.tmall.com/item.htm?id='+item.num_iid]">{{decodeURIComponent(item.title)}}</a></p>
                                <div class="price">{{item.ump_price}}</div>
                            </div>
                            <!--<div class="skus">
                                <div class="sku" v-for="sku in JSON.parse(item.skus)">
                                    <span class="color" :style="{'background-color': '#'+sku.sku_feature.color_value}"></span><span v-for="sku_name in sku.properties_name.split(';')">{{sku_name.replace(/(.*?:){3}(.*)/,"$2")}}</span>
                                </div>
                            </div>-->
                            <div class="operate">
                                <button
                                        v-bind:class="check(item.num_iid) >= 0 ? 'cancelbtn':'selectedbtn'"
                                        v-on:click="check(item.num_iid) >= 0 ? delSelected(item):selected(item)" >{{check(item.num_iid) >= 0 ? '取消' : '添加'}}</button>
                            </div>
                        </div>
                        <pagination :total-items="items.total"
                                    :curr-page="params.pageNo"
                                    :size-page="params.pageSize"
                                    prev-show="2"
                                    next-show="2"
                                    @pageChange="pageChange">
                        </pagination>
                    </div>
                </div>
                <div class="items_right">
                    <div class="all_items">
                        <div class="item" v-for="item in selectedList">
                            <img :src="item.item_imgs.split(';')[0]+'_60x60.jpg'"/>
                            <div class="detail">
                                <p class="title"><a target="_blank" :href="['//detail.tmall.com/item.htm?id='+item.num_iid]">{{decodeURIComponent(item.title)}}</a></p>
                                <div class="price">
                                    <span>{{item.ump_price}}</span>
                                    选择SKU: <select v-model="item.selectedSKU">
                                        <option v-for="sku in JSON.parse(item.skus)" v-bind:value="sku">{{sku.properties_name.split(';')[0].replace(/(.*?:){3}(.*)/,"$2")}}</option>
                                    </select>
                                </div>
                            </div>
                            <!--<div class="skus">
                                <div class="sku" v-for="sku in JSON.parse(item.skus)">
                                    <span class="color" :style="{'background-color': '#'+sku.sku_feature.color_value}"></span><span v-for="sku_name in sku.properties_name.split(';')">{{sku_name.replace(/(.*?:){3}(.*)/,"$2")}}</span>
                                </div>
                            </div>-->
                            <div class="operate">
                                <button
                                        v-bind:class="check(item.num_iid) >= 0 ? 'cancelbtn':'selectedbtn'"
                                        v-on:click="check(item.num_iid) >= 0 ? delSelected(item):selected(item)" >{{check(item.num_iid) >= 0 ? '取消' : '添加'}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ft">
                <button class="" v-on:click="save()">确定</button>
                <button class="cancelbtn" v-on:click="close()">取消</button>
            </div>
        </div>
    </div>
</template>


<script>
    import fn from 'admin/js/common/function.js';
    import navTree from 'admin/js/common/nav-tree.vue';
    import pagination from 'admin/js/common/pagination.vue';

    export default {
        data: function(){
            return {
                config: {
                    title: '请稍等...',
                    content: '',
                    style: {
                        left: 100,
                        top: 30,
                        width: 150,
                        height: 'auto'
                    },
                    customClass: ''	//自定义样式
                },
                params: {
                    keyWord: '',
                    catsId: 0,
                    pageNo: 1,
                    pageSize: 5
                },
                cats: [],
                s_id: 0,
                s_cat: {},
                items: {
                    loading: true,
                    total: 0,
                    list: [],
                    skus:[]
                },
                selectedList: []
            }
        },
        methods: {
            cssStyle(){
                return fn.makeStyle(this.config.style);
                //return null;
            },
            close(){
                $('.cover-box').remove();
            },
            check(num_iid){
                var index =  _.findIndex(this.selectedList, function(o) {
                    return o.num_iid == num_iid;
                });
                return index;
            },
            selected(item){
                this.selectedList.push(item);
            },
            delSelected(item){
                var ii = _.find(this.selectedList,{'num_iid':item.num_iid});
                var index = this.selectedList.indexOf(item);
                this.selectedList.splice(index, 1);
            },
            pageChange(i){
                var self = this;
                self.params.pageNo = i;
                this.getItems();
                $('.right').scrollTop(0);
            },
            search(){
                this.getItems();
            },
            save(){
                var self = this;
                this.$emit('selectItem', self.selectedList);
                $('.cover-box').remove();
            },
            getItems(){
                var self = this;

                //取商品
                $.ajax({
                    type: 'POST',
                    url: CFG.api.mac.getItems,
                    dataType: 'json',
                    data: self.params,
                    error: function (error) {
                        //alert(JSON.stringify(error));
                    },
                    success: function (response) {
                        if (response.err) {
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        } else {
                            self.items.list = response.data.list;
                            self.items.total = response.data.total;
                            self.items.loading = false;
                        }
                    }
                });
            }

        },
        created (){
            var self = this;

            this.$nextTick(function(){
                $.extend(true,self.$data, self.temp);

                //取分类
                $.ajax({
                    type:'POST',
                    url: CFG.api.mac.getCats,
                    dataType:'json',
                    data:{
                        //parentID: 0
                    },
                    error:function(error){
                        //alert(JSON.stringify(error));
                    },
                    success:function(response){
                        if(response.err){
                            //alert(response.err.msg);
                            //response.err.sub_msg = decodeURIComponent(response.err.sub_msg);
                            //fn.tx(response);
                        }else{
                            var t_cat = [{
                                cid: 0,
                                name: '全部分类',
                                sub_cats: response.data,
                                value: 0
                            }];
                            $.each(response.data,function(i,t){
                                t_cat.push(t);

                                $.each(t.sub_cats,function(ii,tt){
                                    tt.name = '-'+tt.name;
                                    t_cat.push(tt);
                                })

                                t.sub_cats = [];
                            });

                            self.cats = t_cat;
                        }
                    }
                });

                self.getItems();
            })

        },
        components: {
            pagination
        }
    }
</script>

<style lang="less">
    .cover-box {
        position: fixed;
        width:100%;
        height: 100%;
        z-index: 200;
        background-color: rgba(0,0,0,0.5);

        .item-show {
            top:10px;
            _position:absolute;
            min-height:50px;
            _height:50px;
            opacity: 0.9;
            background-color: #ccc;
            border-radius: 4px;
            margin: 30px auto;

            input {
                width: 175px;
            }

            hr {
                margin: 10px 0;
                border: 0;
                border-top: 1px solid #242424;
                border-bottom: 1px solid #404040;
            }

            .hd {
                display: flex;
                justify-content:  space-between;
                height:30px;
                line-height: 30px;
                vertical-align: middle;
                padding:0 5px;
                border-bottom: 1px solid #242424;
                border-bottom: 1px solid rgba(0, 0, 0, 0.4);
            }

            .bd {
                display: flex;
                padding: 10px;

                .items_left,
                .items_right {
                    width: 50%;
                    border-right: 1px solid #333;
                    padding-right: 10px;

                    .all_items {
                        padding-top: 10px;

                        .item {
                            display: flex;
                            height: 62px;
                            border: 1px solid #999;
                            margin-bottom: 5px;
                            justify-content: space-between;

                            .detail{
                                width: 300px;
                                overflow: hidden;
                                padding: 0 10px;

                                .title {
                                    height:40px;
                                }

                                span {
                                    margin-right: 20px;
                                }

                                select {
                                    width:150px;
                                    height: 20px;
                                    padding: 0;
                                }
                            }

                            .operate {
                                line-height: 60px;
                                padding-right: 10px;
                            }

                        }
                    }
                }

                .items_right {
                    border-right: none 0;
                    padding-right: 0;

                    .all_items {
                        padding-left: 10px;
                    }
                }

            }

            .ft {
                vertical-align: middle;
                padding:2px 5px;
                text-align: center;
                border-top: 1px solid #242424;
                border-top: 1px solid rgba(0, 0, 0, 0.4);
            }


        }
    }

</style>
